<template>
  <div>
    <div class="breadcrumb_wrap">
      <span class="current">当前位置：</span>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/personalcenter' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>评论通知</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button
        style="position: absolute; right: 10px; top: 5px"
        type="primary"
        plain
        size="small"
        @click="toDoctorCertify"
      >医生认证</el-button
      >
    </div>


    <div class="msg_list">
      <div class="msg_item" v-for="(item, index) in messageList" v-if="item.checkFlag===1" :key="index">
        <div class="user_line">
          <div style="display: flex; align-items: center">
<!--            <el-avatar-->
<!--              shape="circle"-->
<!--              :size="40"-->
<!--              :src="avatarUrl"-->
<!--            ></el-avatar>-->
            <!--            <span class="user_name" v-if="item.sendId!==userId">sendId:{{item.sendId}}</span>-->
<!--            <span class="user_name">sendNum:{{item.sendNum}}</span>-->
<!--            <span class="user_name">sendName:{{sendName}}</span>-->
<!--            <span class="user_name">receiveId:{{item.receiveId}}</span>-->
            <span class="content">用户{{item.content}}号文章</span>
            <span class="link" @click="handleArtical(item.artId)">文章链接</span>
            <span class="date">{{item.sendTime}}</span>
<!--            <span>共{{msgData.total}}条私信</span>-->
          </div>
          <div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: "message",
  data() {
    return {
      sendNum:null,
      sendName:null,
      avatarUrl:'',
      msgData:{
        total:null,
        code:null,
      },
      qmUserInfo: {},
      userId:null,
      tabsActive: "user",
      logo: require("@/assets/images/logo.jpg"),
      messageList:[

      ],
    };
  },
  // watch: {
  //   $route: {
  //     handler() {
  //       this.tabsActive = this.$route.query.tab;
  //     },
  //     deep: true,
  //   },
  // },
  methods: {
    handleArtical(artId){
      console.log(artId)
      let link = this.$router.resolve({
        path: "/article",
        query: { artId: artId },
      });
      window.open(link.href, "_blank");
    },
    async getUserInfo() {
      // const res = await this.$api.reqUserInfo({});
      const res = await this.$api.reqUserInfo({});
      if(res.code===200) {
        this.qmUserInfo = res.user;
        this.userId = res.user.userId
      }
    },
    //根据sendNum显示头像 接口无法使用
    async sendIdInfo(sendNum){
      const res = await this.$api.reqSendIdInfo(item.sendNum);
      console.log(res.data);
      if (sendRes.code===200){
        this.sendName=res.data.userName;
        this.avatarUrl=this.$api.BASEURL+res.data.avatar;
      }
    },
    // 根据用户id查看全部私信列表
    async sendList(userId){
      let msgList = await this.$api.reqMessageList(userId);
      if (msgList.code===200){
        this.msgData.total = msgList.total;
        this.msgData.code = msgList.code;
        for(let i=0; i<msgList.rows.length; i++){
          if(msgList.rows[i].checkFlag===1){
            msgList.rows[i]['sendNum']=msgList.rows[i].content.match(/\d+(.\d+)?/g)[0];
            msgList.rows[i]['artId']=msgList.rows[i].content.match(/\d+(.\d+)?/g)[1];
            // const sendRes = await this.$api.reqSendIdInfo(msgList.rows[i].sendId);
            // if (sendRes.code===200){
            //   msgList.rows[i]['sendName']=sendRes.data.userName;
            //   msgList.rows[i]['avatarUrl']='http://124.222.236.194/dev-api'+sendRes.data.avatar;
            // }
          }
        }
        this.messageList = msgList.rows;
        console.log(this.messageList);
      }
    },

    //跳转到医生认证
    toDoctorCertify() {
      this.$router.push("/doctorCertify");
    },
  },
  mounted(){
    this.getUserInfo();
    // this.getSendIdInfo();
    this.sendList(this.$cookies.get('userId'));
    //this.sendIdInfo();
  },
};
</script>

<style lang="scss" scoped>
.breadcrumb_wrap {
  width: 100%;
  height: 40px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding-left: 10px;
  box-sizing: border-box;
  .current {
    font-size: 14px;
  }
}
.msg_list {
  margin-top: 20px;
  .msg_item {
    background-color: #fff;
    width: 100%;
    padding: 30px;
    box-sizing: border-box; //!!!
    border-bottom: 1px solid #eee;
    &:last-child {
      border-bottom: 0;
    }
    .user_line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .user_name {
        color: #666;
        font-size: 16px;
        margin-left: 10px;
      }
      .date {
        color: #aaa;
        font-size: 14px;
        margin-left: 14px;
      }
      .link {
        color: #25b6a0;
        font-size: 14px;
        margin-left: 14px;
      }
      .content {
        color: #393939;
        font-size: 16px;
        margin-left: 14px;
      }
    }
    .msg_content {
      color: #333;
      font-size: 14px;
      text-align: left;
      line-height: 30px;
    }
  }
}
</style>
